import React from 'react'
import { connect } from 'dva'
import LwjTable from 'components/LwjTable/LwjTable'
import queryString from 'query-string'
import { Button, Row, Col, Switch, Modal, Transfer, Popover, Table } from 'antd'
//常用组件
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import ExpandFilter from 'components/Filter/OrderFilterExpand'
import { Page } from 'components'
import ClassifyTree from './Tree'
//时间转化
import moment from 'moment'
//样式
import styles from './ProductList.less'

const ProductList = ({ location, dispatch, productlist, app, loading }) => {

  //数据
  const {
    list,
    pagination,
    storeVisible,
    targetStoreKeys,
    storeList,
    materialVisible,
    materialList,
    classifyList,
    classifySearchKeyword,
    queryParam,
    classifyId,
    id
  } = productlist;

  //导航栏
  const breadcrumbList = [{
    title: "商品管理"
  }, {
    title: "全部商品"
  }];

  //筛选
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'name',
        title: '商品名称'
      }, {
        type: 'input',
        id: 'goods_id',
        title: 'SPU编码'
      }, {
        type: 'input',
        id: 'id',
        title: 'SKU编码'
      }, {
        type: 'select',
        id: 'status',
        title: '上下架状态',
        options: [
          {
            value: '',
            name: '全部'
          },
          {
            value: '1',
            name: '已上架'
          }, {
            value: '0',
            name: '已下架'
          }
        ]
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'productlist/changeFilter',
        queryParam: value
      })
      dispatch({
        type: 'productlist/query',
        payload: {
          start: 0,
          limit: pagination.pageSize
        }
      })
    }
  }

  // 表格属性
  const tableProps = {
    dataSource: list,
    loading: loading.effects['productlist/query'],
    pagination,
    pageChangeAction: 'productlist/query',
    dispatch,
    location
  };

  //表格参数
  const columns = [
    {
      title: '所属分类',
      dataIndex: 'cate_name',
      key: 'cate_name',
      width: '10%'
    }, {
      title: 'SPU编码',
      dataIndex: 'goods_id',
      key: 'goods_id',
      width: '10%'
    }, {
      title: 'SKU编码',
      dataIndex: 'sku_id',
      key: 'sku_name',
      width: '10%'
    }, {
      title: '商品图片',
      dataIndex: 'goods_info',
      key: 'goods_info',
      width: '15%',
      render: (text, record) => {
        return (
          <Popover content={<img src={record.goods_info ? record.goods_info.cover_path : ''} className={styles.productBigImg} />} title="商品图片" placement="right">
            <img src={record.goods_info ? record.goods_info.cover_path : ''} className={styles.productSmallImg} />
          </Popover>
        )
      }
    }, {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
      width: '20%',
      render: (text, record) => {
        return (
          <a onClick={() => toggleModal('material', true, record.id)}>{record.name}</a>
        )
      }
    }, {
      title: '库存',
      dataIndex: 'stock',
      key: 'stock',
      width: '8%'
    }, {
      title: '商品状态',
      dataIndex: 'status',
      key: 'status',
      width: '10%',
      render: (text, record) => {
        return (
          <span>
            {record.status ? '已上架' : '已下架'}
          </span>
        )
      }
    },
    {
      title: '建议零售价',
      dataIndex: 'price',
      key: 'price',
      width: '7%',
      render: (text) => text && text.toFixed(2)
    },
    {
      title: '操作',
      key: 'handle',
      width: '10%',
      render: (text, record) => {
        if (record.has_material) {
          return (<a onClick={() => toggleModal('store', true, record.id)}>关联</a>)
        } else {
          return (<span>商品未绑定物料</span>)
        }
      }
    }
  ]

  // 类目
  const classifyTreeProps = {
    dataSource: classifyList,
    defaultExpandAll: true,
    showLine: true,
    showIcon: false,
    onSelect: (datum) => {
      dispatch({
        type: 'productlist/setClassifyId',
        id: datum.id
      })
      dispatch({
        type: 'productlist/query',
        payload: {
          start: 0,
          limit: pagination.pageSize
        }
      })
    },
    dispatch,
    searchKeyword: classifySearchKeyword
  }

  //物料表格
  const materialColumns = [{
    title: '物料编码',
    dataIndex: 'material_code',
    key: 'material_code',
    width: '20%'
  }, {
    title: '物料名称',
    dataIndex: 'material_name',
    key: 'material_name',
    width: '20%'
  }, {
    title: '数量',
    dataIndex: 'material_num',
    key: 'material_num',
    width: '20%'
  }, {
    title: '单位',
    dataIndex: 'unit',
    key: 'unit',
    width: '20%'
  }
    //   , {
    //      title: '建议零售价',
    //      dataIndex: 'advice_retail_price',
    //      key: 'advice_retail_price',
    //      width: '20%'
    // }
  ]

  // 切换弹窗
  const toggleModal = (name, flag, id) => {
    dispatch({
      type: 'productlist/toggleModal',
      name: name,
      flag: flag
    })
    if (flag) {
      if (name == 'store') {
        dispatch({
          type: 'productlist/setSelectedId',
          id
        })
        dispatch({
          type: 'productlist/storeLinkedList',
          id
        })
      } else {
        dispatch({
          type: 'productlist/setSelectedId',
          id
        })
        dispatch({
          type: 'productlist/materialList',
          id
        })
      }
    }
  }

  //门店搜索
  const filterStoreOption = (inputValue, option) => {
    return option.name.indexOf(inputValue) > -1;
  }

  //穿梭
  const handleStoreChange = (targetKeys, direction, moveKeys) => {
    dispatch({
      "type": 'productlist/setLinkedStoreList',
      "targetStoreKeys": targetKeys
    })
  }

  //关联&取关
  const onChangeLinked = () => {
    dispatch({
      type: 'productlist/link',
      param: {
        distributorIds: (targetStoreKeys ? targetStoreKeys : []),
        commodityIds: [id],
        linkedStatus: 'FRESH'
      }
    })
    toggleModal('store', false);
  }

  const handleFormChange = (changedFields = {}) => {
    let queryParam = {};
    for (let key in changedFields) {
      queryParam[key] = changedFields[key].value
    }
    dispatch({
      type: 'productlist/changeFilter',
      queryParam: queryParam
    })
  }

  return (
    <PageHeaderLayout title="全部商品" breadcrumbList={breadcrumbList}>
      <Page inner className={styles.productList}>
        <Row gutter={40}>
          <Col xs={{ span: 24 }} lg={{ span: 5 }} style={{ maxHeight: '1000px', overflow: 'auto' }}>
            {classifyList && classifyList.length > 0 ? <ClassifyTree {...classifyTreeProps} /> : null}
          </Col>
          <Col xs={{ span: 24 }} lg={{ span: 19 }}>
            <ExpandFilter {...filterProps} onChange={handleFormChange} />
            <LwjTable {...tableProps} columns={columns} />
          </Col>
        </Row>
        <Modal
          visible={storeVisible}
          title="选择门店"
          onOk={() => toggleModal('store', false)}
          onCancel={() => toggleModal('store', false)}
          width={800}
          destroyOnClose={true}
          footer={
            storeList && storeList.length > 0
              ? [<Button key="back" onClick={() => toggleModal('store', false)}>取消</Button>,
              <Button key="submit" type="primary" htmlType="submit" onClick={() => onChangeLinked()} >确认</Button>]
              : [<Button key="back" onClick={() => toggleModal('store', false)}>关闭</Button>]
          }>
          <Transfer
            dataSource={storeList}
            showSearch
            listStyle={{
              width: 350,
              height: 300,
            }}
            titles={['未关联门店', '已关联门店']}
            filterOption={filterStoreOption}
            targetKeys={targetStoreKeys}
            onChange={handleStoreChange}
            render={item => item.name}
            rowKey={item => item.id}
          />
        </Modal>
        <Modal
          visible={materialVisible}
          title="查看物料和价格"
          onOk={() => toggleModal('material', false)}
          onCancel={() => toggleModal('material', false)}
          width={800}
          destroyOnClose={true}
          footer={[
            <Button key="back" onClick={() => toggleModal('material', false)}>关闭</Button>
          ]}>
          <Table dataSource={materialList} columns={materialColumns} rowKey="id" />
        </Modal>
      </Page>
    </PageHeaderLayout>
  )
}


export default connect(({ productlist, app, loading }) => ({ productlist, app, loading }))(ProductList)
